<template>
    <div class="index-lists">
		<el-tabs v-model="tabsParams.active" class="demo-tabs">
			<el-tab-pane label="预约时间" name="0">
				<el-card class="!border-none" shadow="never">
				    <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				    
						<el-form-item label="状态" prop="isDisable">
							<el-select class="w-[280px]" v-model="queryParams.isDisable" placeholder="请选择">
							    <el-option
							      v-for="item in statusList"
							      :key="item.value"
							      :label="item.name"
							      :value="item.value">
							    </el-option>
							  </el-select>
						</el-form-item>
						
				        <el-form-item>
				            <el-button type="primary" @click="resetPage">查询</el-button>  
							<el-button @click="resetParams">重置</el-button>
				        </el-form-item>
				    </el-form>
				</el-card>
				<el-card class="!border-none mt-4" shadow="never">
				    <div>
				        <el-button v-perms="['slot:add']" type="primary" @click="handleAdd()">
				            <template #icon>
				                <icon name="el-icon-Plus" />
				            </template>
				            新增
				        </el-button>
				    </div>
				    <el-table
				        class="mt-4"
				        size="large"
				        v-loading="pager.loading"
				        :data="pager.lists"
				    >				
				        <el-table-column label="开始时间" prop="startTime" min-width="100" />
				        <el-table-column label="结束时间" prop="endTime" min-width="100" />
						<el-table-column label="附加金额" prop="orderAmount" min-width="100" />
						<el-table-column label="排序" prop="sort" min-width="100" />				
				        <el-table-column label="状态" prop="isDisable" min-width="100">
				            <template #default="{ row }">
				                <el-tag v-if="row.isDisable == 0">开启</el-tag>
				                <el-tag v-else type="danger">关闭</el-tag>
				            </template>
				        </el-table-column>               
				        <el-table-column label="创建时间" prop="createTime" min-width="120" />                
				        <el-table-column label="操作" width="120" fixed="right">
				            <template #default="{ row }">
				                <el-button
				                    v-perms="['slot:edit']"
				                    type="primary"
				                    link
				                    @click="handleEdit(row)"
				                >
				                    编辑
				                </el-button>
				                <el-button
				                    v-perms="['slot:del']"
				                    type="danger"
				                    link
				                    @click="handleDelete(row.id)"
				                >
				                    删除
				                </el-button>
				            </template>
				        </el-table-column>
				    </el-table>
				    <div class="flex justify-end mt-4">
				        <pagination v-model="pager" @change="getLists" />
				    </div>
				</el-card>
			</el-tab-pane>
			
			
			<el-tab-pane label="日期设置" name="1">
				<el-form ref="formRef1" :rules="rules" :model="formData" label-width="120px">
					<el-card shadow="never" class="!border-none">
					  <div class="text-xl font-medium mb-[20px]">日期设置</div>		  
					  <el-form-item label="可提前预约" prop="jiazOrderDay">
						<div class="w-[300px]">
						  <el-input v-model="formData.jiazOrderDay" placeholder="请输入整数">
						      <template #append>天</template>
						  </el-input>
						  <div class="form-tips">
							用户可以提前预约的天数，默认7天
						  </div>
						</div>
					  </el-form-item>
					  
					  <el-form-item label="当天可预约" prop="jiazOrderHour">
						<div class="w-[300px]">
						  <el-input v-model="formData.jiazOrderHour" placeholder="请输入整数">
							  <template #append>小时</template>
						  </el-input>
						  <div class="form-tips">
							用户可预约当天几小时后的时间，默认4小时
						  </div>
						</div>
					  </el-form-item>
					  
					</el-card>					
				</el-form>				
				
				<footer-btns v-perms="['setting:website:save']">
				    <el-button type="primary" @click="handleSubmit">保存</el-button>
				</footer-btns>
			</el-tab-pane>
		</el-tabs>
        
        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="getLists"
            @close="showEdit = false"
        />
    </div>
</template>
<script lang="ts" setup name="slot">
import { slotDelete, slotLists, getWebsite, setWebsite } from '@/api/setting/slot'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import EditPopup from './edit.vue'
import type { FormInstance } from "element-plus";
const formRef = ref<FormInstance>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)

const tabsParams = reactive({
    active: '0',
    TabsEnumMap: [
        {
            label: '预约时间',           
            type: '0'
        },
        {
            label: '日期设置',           
            type: '1'
        }
    ]
})

let formData = reactive({
	jiazOrderDay: 7,
	jiazOrderHour: 4
});

// 表单验证
const rules = {
  jiazOrderDay: [
    {
      required: true,
      message: "请输入提前预约天数",
      trigger: ["blur"],
    },
  ]
};

const queryParams = reactive({
    startTime: '',    
    endTime: '',    
    sort: '',
    isDisable: '',
})

const statusList = ref<any[]>([
	{"value":0,"name":"开启"},
	{"value":1,"name":"关闭"}	
])

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: slotLists,
    params: queryParams
})

// 日期设置保存
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setWebsite(formData);
	feedback.msgSuccess("操作成功"); 
};

const handleAdd = async () => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('add')
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await slotDelete({ id })
    feedback.msgSuccess('删除成功')
    getLists()
}

const getData = async () => {
    getLists()
    const data = await getWebsite()
	formData.jiazOrderDay = data.jiazOrderDay;
	//console.log("data:" + JSON.stringify(data))   
}

getData()
</script>
